<template>
  <div
    id="box"
    class="container-fluid"
  >
    <!-- 表头 -->
    <mt-header>
      <router-link
        to="/"
        slot="left"
      >
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <p class="art-tit">{{ article_data.title }}</p>
    <img
      class="img-responsive"
      v-bind:src="article_data.image"
      alt="图片"
    />
    <div
      class="content"
      v-html="article_data.content"
    >
    </div>
    <div class="button">
      <button
        v-on:click="hits"
        id="like"
      >点赞</button>
    </div>
    <div
      class="goods_link"
      overflow='hidden'
    >
      <div class="goods_left">
        <img
          style="width:110px;height:80px"
          alt="goods_img"
        />
        <!-- :src="goods_data[0].thumb"   -->
      </div>
      <div class="goods_right">
        <p></p>
        <p></p>
        <!-- <p>{{ goods_data[0].name }}</p>
        <p>{{ goods_data[0].shop_price }}</p> -->
      </div>
    </div>
    <div class="foot">
      <span>&#9800; {{ article_data.reading_number }}</span>
      <span>&#9800; {{ article_data.like_number }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      article_data: '',
      goods_data: ''
    };
  },
  created () {
    this.convert();
  },
  methods: {
    convert: function () {
      this.$http
        .get("http://192.168.1.176:8087/api/v1/articledetails?article_id=1").then(res => {
          this.article_data = res.data.data.article_data;
          this.goods_data = res.data.data.goods_data
          console.log(res.data.data)
        });
    },
    hits: function () {
      this.article_data.reading_number += 1;
      var like = document.getElementById('like').style.cursor = 'not-allowed';
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#box > .title {
  display: flex;
  padding: 10px 10px;
  font-size: 20px;
  margin-bottom: 2px;
  background-color: white;
  /* justify-content: center; */
  justify-content: space-between;
}
#box {
  margin: 0 auto;
  margin: 10px;
  overflow: hidden;
}
#box > p {
  font-size: 16px;
  margin: 10px;
}
#box > img {
  margin: 10px 0;
}
#box > .content {
  margin: 0 10px 10px 0;
  margin: 0 auto;
}
#box > .button > button {
  width: 100px;
  height: 40px;
  border-radius: 7px;
  margin: 0 37%;
  background-color: white;
  border: 2px black solid;
  font-size: 16px;
}
#box > .button > button:hover {
  font-size: 20px;
}
#box > .goods_link {
  padding: 10px 10px;
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5;
  margin: 10px 0;
}
#box > .goods_link > .goods_left {
  margin-right: 15px;
}
#box > .goods_link > .goods_right {
  height: 80px;
  line-height: 40px;
}
#box > .foot > span {
  margin-right: 20px;
}

/* 头部 */
.mint-header {
  height: 69px;
  background-color: #fff;
  border-bottom: 0.08rem /* 6/75 */ solid #f5f5f5;
}
.router-link-active {
  width: 9px;
  height: 18px;
  opacity: 1;
  color: #333333;
}
.mint-button-icon {
  font-size: 26px;
}

/* art-tit小标题 */
.art-tit {
  width: 4.08rem /* 306/75 */;
  height: 0.32rem /* 24/75 */;
  opacity: 1;
  font-size: 0.24rem /* 18/75 */;
  font-family: Microsoft YaHei;
  color: rgba(51, 51, 51, 1);
  letter-spacing: 0rem /* 0/75 */;
}

/* 图片 */
</style>
